<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.student_no" clearable placeholder="学号" style="width: 150px" class="filter-item"/>
      <el-input v-model="listQuery.realname" clearable placeholder="姓名" style="width: 150px" class="filter-item"/>
      <el-input v-model="listQuery.zhuanye" clearable placeholder="专业" style="width: 150px" class="filter-item"/>
      <el-input v-model="listQuery.class" clearable placeholder="班级" style="width: 150px" class="filter-item"/>
      <el-select v-model="listQuery.grade" clearable placeholder="年级" class="filter-item">
        <el-option v-for="(value, index) in grade" :key="index" :value="index" :label="value"/>
      </el-select>
      <el-date-picker v-model="listQuery.start_and_end" :picker-options="pickerOptions" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"/>
      <el-button type="primary" class="filter-item" @click="handleFilter">搜索</el-button>
      <el-button type="danger" class="filter-item" icon="el-icon-delete" @click="handleBatchDel">批量删除</el-button>
    </div>
    <el-table v-loading="listLoading" ref="multipleTable" :data="list" element-loading-text="Loading" border highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection"/>
      <el-table-column label="ID">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="学号">
        <template slot-scope="scope">{{ scope.row.student_no }}</template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column label="专业">
        <template slot-scope="scope">{{ scope.row.zhuanye }}</template>
      </el-table-column>
      <el-table-column label="年级">
        <template slot-scope="scope">{{ scope.row.grade }}</template>
      </el-table-column>
      <el-table-column label="班级">
        <template slot-scope="scope">{{ scope.row.class }}</template>
      </el-table-column>
      <el-table-column label="签到情况">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="签到地址">
        <template slot-scope="scope">{{ scope.row.address }}</template>
      </el-table-column>
      <el-table-column label="签到时间">
        <template slot-scope="scope">{{ scope.row.create_time }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData"/>
    <el-dialog :visible.sync="dialogVisible" title="编辑">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 800px; margin-left:50px;">
        <el-form-item label="学号：">
          <el-input v-model="temp.student_no" readonly style="width: 300px"/>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="temp.username" readonly style="width: 300px"/>
        </el-form-item>
        <el-form-item label="专业：">
          <el-input v-model="temp.zhuanye" readonly style="width: 300px"/>
        </el-form-item>
        <el-form-item label="年级：">
          <el-input v-model="temp.grade" readonly style="width: 300px"/>
        </el-form-item>
        <el-form-item label="班级：">
          <el-input v-model="temp.class" readonly style="width: 300px"/>
        </el-form-item>
        <el-form-item label="签到情况：" prop="title">
          <el-input v-model="temp.title" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="签到地址：">
          <el-input v-model="temp.address" readonly style="width: 300px"/>
        </el-form-item>
        <el-form-item label="签到时间：">
          <el-input v-model="temp.create_time" readonly style="width: 300px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getList, detail, save, del } from '@/api/sign'
export default {
  name: 'Index',
  components: { Pagination },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      listQuery: {
        page: 1,
        limit: 20,
          student_no:'',
          zhuanye: '',
          grade: '',
          class: '',
        start_and_end: ''
      },
      listLoading: true,
      dialogVisible: false,
      list: [],
      grade: [],
      total: 0,
      rules: {
        title: [{ required: true, message: '签到情况必填', trigger: 'change' }]
      },
      temp: {
        id: undefined,
        uid: undefined,
        username: '',
        title: '',
        address: '',
        create_time: '',
        zhuanye: '',
        grade: '',
        class: ''
      },
      multipleSelection: [],
      delarr: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getList(this.listQuery).then(res => {
        this.listLoading = false
        this.list = res.data.list
        this.grade = res.data.grade
        this.total = res.data.total
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        uid: undefined,
        username: '',
        title: '',
        address: '',
        create_time: '',
        zhuanye: '',
        grade: '',
        class: ''
      }
    },
    handleUpdate(id) {
      this.resetTemp()
      detail({ id }).then(res => {
        this.temp = res.data
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleBatchDel() {
      this.delArr = []
      for (const item of this.multipleSelection) {
        this.delArr.push(item.id)
      }
      this.$confirm('删除不可恢复，是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        if (this.delArr.length > 0) {
          del({ id: this.delArr }).then(response => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.fetchData()
          })
        } else {
          this.$notify({
            message: '您尚未做批量选择',
            type: 'info',
            duration: 2000
          })
        }
      }).catch(() => {
        this.$refs.multipleTable.clearSelection()
        this.$message({
          type: 'info',
          message: '已取消批量删除'
        })
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({ id: id }).then(response => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          message: '取消删除',
          type: 'info'
        })
      })
    },
    saveData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          save(this.temp).then(res => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.dialogVisible = false
            this.fetchData()
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
